<template>
	<view class="content">
		<uv-navbar title="个人中心"></uv-navbar>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<button type="primary">页面主操作 Normal</button>
		<uni-collapse accordion>
			<uni-collapse-item title="手风琴效果">
				<text>折叠内容</text>
			</uni-collapse-item>
			<uni-collapse-item title="手风琴效果">
				<text>折叠内容</text>
			</uni-collapse-item>
			<uni-collapse-item title="禁用状态" disabled>
				<text>折叠内容</text>
			</uni-collapse-item>
		</uni-collapse>
		<uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
		<uv-text type="primary" :text="`${userStore.userInfo.name}-${userStore.userInfo.age}`"></uv-text>
		<uv-button text="变成18" type="primary" @click="changeAge"></uv-button>
		<!-- 如果是动态渲染的使用h5模拟 否则使用原生的tabbar 性能会更好，在pages.json中配置tabBar -->
		<!-- <uv-tabbar :value="0" @change="index=>value = index">
			<uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="放映厅" icon="photo"></uv-tabbar-item>
			<uv-tabbar-item text="直播" icon="play-right"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar> -->
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onReady } from '@dcloudio/uni-app';
	import { getCurrentInstance } from 'vue';
	import { useUserStore } from "@/store/common";
	import { fetchMenu } from '@/api/api.js'


	const userStore = useUserStore();
	const { ctx } = getCurrentInstance();
	onReady(() => {
		ctx.$uv.getRect('.demo').then(res => {
			console.log(res)
		})
	})
	console.log(uni.$uv.os())

	const title = ref('hello uv-ui')
	const changeAge = () => {
		userStore.changeAge(18)
	}
	fetchMenu()
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: $uni-text-color-grey;
	}
</style>